<template>
	<view class="web_bg">
		<view class="text-orange text-sl login_title">登录</view>

		<view class="form_box">
			<view class="text-xxl text-orange login_text">欢迎来到心恋</view>
			<form>
				<view class="cu-form-group cu-form-style" v-if="login_type==0">
					<view class="title">邮件</view>
					<input type="email" placeholder="请输入邮箱" name="input" v-model="form.email"></input>
				</view>
				<view class="cu-form-group cu-form-style" v-if="login_type==1">
					<view class="title">手机号</view>
					<input type="number" placeholder="请输入手机号" name="input" v-model="form.phone"></input>
				</view>
				<view class="cu-form-group cu-form-style">
					<view class="title">密码</view>
					<input type="password" placeholder="请输入密码" name="input" v-model="form.password"></input>
				</view>
				<view class="cu-form-group cu-form-style">
					<view class="title">验证码</view>
					<input placeholder="输入框验证码" name="input" v-model="form.code"></input>
					<image :src="baseImg" v-if="baseImg" style="width: 200upx;height: 80upx;" @click="getCodeFun">
					</image>
				</view>
			</form>
			<view class="login_btn">
				<button class="cu-btn bg-orange margin-tb-sm lg login_btn_login" @click="loginBtn">登录</button>
			</view>
			<view class="hasAccount">
				没有账号？
				<text class="text-orange" @click="goLogin">
					去注册
					<text class="cuIcon-right text-orange"> </text>
				</text>

			</view>
			<view class="otherRegister">
				<text class="text-white">其他登录方式：</text>
				<text class="text-xsl cuIcon-mobile text-white phone" @click="handoff(1)"></text>
				<text class="text-xsl cuIcon-mail text-white phone" @click="handoff(0)"></text>
				<text class="text-xsl cuIcon-weixin text-white phone" @click="handoff(2)"></text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getMailCode,
		register,
		getCode,
		login
	} from "@/utils/api.js"
	import {
		ref,
		reactive,
		onMounted
	} from "vue"
	let baseImg = ref("")
	let codeObj = {}
	//表单参数
	let form = reactive({
		email: "admin",
		phone: "",
		password: "123456Z@z",
		code: ""
	})
	//注册方式 0：邮箱 1：手机号
	let login_type = ref(0)

	//验证码显示
	let getCodeText = ref("验证码")

	let range = ref([{
			value: 0,
			text: "篮球"
		},
		{
			value: 1,
			text: "足球"
		},
		{
			value: 2,
			text: "游泳"
		},
	])


	onMounted(() => {
		getCodeFun()
	})

	let getCodeFun = () => {
		getCode().then(res => {
			console.log("res", res)
			baseImg.value = "data:image/png;base64," + res.img
			codeObj = res
		})
	}
	//获取验证码
	let getMainCodeFun = () => {
		if (!form.email.trim()) {
			return uni.showToast({
				title: "请输入邮箱地址",
				icon: "error"
			})
		}
		const regexMain = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		if (!regexMain.test(form.email.trim()) && !login_type.value) {
			return uni.showToast({
				title: "邮箱格式不正确",
				icon: "error"
			})
		}
		const regexPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
		if (!regexPhone.test(form.phone.trim()) && login_type.value)
			if (reqister_type.value != "验证码") {
				return uni.showToast({
					title: "手速太快了，请稍后获取",
					icon: 'none'
				})
			}
		getMailCode(form.email.trim())
			.then(res => {
				console.log("res", res)
				uni.showToast({
					title: "发送成功，请去" + (login_type.value ? "短信" : "邮箱") + "查看验证码。",
					icon: 'none',
					duration: 2000
				})
				login_type.value = 119
				let time = setInterval(() => {
					login_type.value--
					if (login_type.value == 1) {
						login_type.value = "验证码";
						clearInterval(time)
					}
				}, 1000)
			})
			.catch(err => {
				console.log("err", err)
				uni.showToast({
					title: "发送成功，请重试。",
					icon: 'none',
					duration: 2000
				})
			})
	}

	//登录确认
	let loginBtn = () => {
		if ((!form.email || !form.password || !form.code)) {
			return uni.showToast({
				title: "请填写完整信息",
				icon: "none"
			})
		}
		login({
				uuid: codeObj.uuid || "",
				password: form.password,
				username: form.email,
				code: form.code
			})
			.then(res => {
				uni.setStorageSync("token", res.token)
				uni.showToast({
					title: "登录成功",
					icon: "success"
				})
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}, 1500)
			}).catch(err => {
				uni.showToast({
					title: "登录失败",
					icon: "error"
				})
			})
	}

	//切换登录方式
	let handoff = (type) => {
		if (type == 2) {
			
		} else {
			login_type.value = type
		}

	}

	//去往登录页
	let goLogin = () => {
		uni.navigateTo({
			url: "/pages/register"
		})
	}
</script>

<style scoped>
	.web_bg {
		height: 100%;
		background: linear-gradient(135deg, #348f50, #56b4d3);
	}

	.login_title {
		padding: 200upx 40upx 20upx;
	}

	.form_box {
		box-sizing: border-box;
		padding: 100upx 40upx 0;
		background: rgba(0, 0, 0, 0.5);
		height: calc(100% - 326upx);
		border-radius: 80upx 80upx 0 0;
	}

	.login_text {
		padding: 0 40upx 60upx;
		text-align: center;
	}

	.cu-form-style {
		margin-bottom: 40upx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 20upx;
		color: #fff;
		border-color: #000;
	}

	.login_btn {
		padding: 40upx 0upx 0;
	}

	.login_btn_login {
		width: 100%;
	}

	.hasAccount {
		text-align: center;
		padding: 40upx 0 0;
		color: #fff;
	}

	.otherRegister {
		text-align: center;
		padding: 200upx 0 0;
	}

	.phone {
		font-size: 50upx;
		margin-left: 20upx;
	}

	input {
		color: #fff;
	}
</style>